<template>
  <div class="star" :class="starType">
    <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" :key="index"></span>
  </div>
</template>

<script >
  // 把参数设置成变量方便以后维护:
  const LENGTH = 5;
  const CLS_ON = 'on';
  const CLS_HALF = 'half';
  const CLS_OFF = 'off';

  export default {
    props: {
      size: {
        type: Number
      },
      score: {
        type: Number
      }
    },
    computed: {
      starType() {
        return 'star-' + this.size;
      },
      itemClasses() {
      	// 创建一个数组储存：
        let result = [];
        let score = Math.floor(this.score * 2) / 2;
        // 是否会出现半颗的情况
        let hasDecimal = score % 1 !== 0;
        // 判断整数的情况（如果3.6颗则向下取整为3）：
        let integer = Math.floor(score);
        // 根据整数先往数组里推三个满星：
        for (let i = 0; i < integer; i++) {
          result.push(CLS_ON);
        }
        // 判断是否有半颗星：
        if (hasDecimal) {
          result.push(CLS_HALF);
        }
        // 剩余星星用空心填满：
        while (result.length < LENGTH) {
          result.push(CLS_OFF);
        }
        return result;
      }
    }
  };
</script>

<style lang="less" scoped>
@import "../../common/less/index.less";
.star{
	font-size: 0;

	.star-item{
		display: inline-block;
		background-repeat: no-repeat;
	}	

	&.star-48{
		.star-item{
			width:20px;
			height:20px;
			margin-right:22px;
			background-size:20px 20px;
			&:last-child{
				margin-right:0;
			}
			&.on{
				// 满星：
				 .bg-image('star48_on');
			}
			&.half{
				// 半星：
				 .bg-image('star48_half');
			}
			&.off{
				// 没有星：
				.bg-image('star48_off');
			}
		}
	}
	&.star-36{
		.star-item{
			width:15px;
			height:15px;
			margin-right:16px;
			background-size:15px 15px;
			&:last-child{
				margin-right:0;
			}
			&.on{
			
				 .bg-image('star36_on');
			}
			&.half{
				
				 .bg-image('star36_half');
			}
			&.off{
				
				.bg-image('star36_off');
			}
		}
	}
	&.star-24{
		.star-item{
			width:10px;
			height:10px;
			margin-right:3px;
			background-size:10px 10px;
			&:last-child{
				margin-right:0;
			}
			&.on{
			
				 .bg-image('star24_on');
			}
			&.half{
				
				 .bg-image('star24_half');
			}
			&.off{
			
				.bg-image('star24_off');
			}
		}		
	}

}
</style>